@import "header.html"
<link rel="stylesheet" href="../css/book_room.css">
<body>
<header class="fxj-header">
    <span class="back" onclick="back()">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-jiantou"></use>
        </svg>
    </span>
    <h1 class="fxj-title">预定房间</h1>
</header>

<main id="main">
    <!-- 标题信息 -->
    <section class="room-title">
        <img :src="houseInfo.img">
        <div>
            <h1 v-cloak>{{houseInfo.title}}</h1>
            <div>
                <span class="small tips" v-cloak>{{houseInfo.lease_type}}-可住{{houseInfo.people}}人</span>
                <span class="small highlight" v-cloak>￥{{houseInfo.price}}/晚</span>
            </div>
        </div>
    </section>
    <!-- 入住信息 -->
    <section class="room-info">
        <div class="info-date" @click="datePopupShow">
            <span>预定日期</span>
            <span class="highlight" v-cloak>{{infoDate.startDate}}-{{infoDate.endDate}}</span>
            <span>共 <span class="highlight" v-cloak>{{infoDate.nightNum?infoDate.nightNum:'0'}}</span> 晚</span>
        </div>
        <i class="tieku"></i>
        <div class="check-in-guys" onclick="addGuy()">
            <span>入住人</span>
            <span :class="{highlight:infoDate.guysSelected,tips:!infoDate.guysSelected}" v-cloak>
                {{infoDate.guysSelected?infoDate.guysShowText:'可住'+houseInfo.people+'人,请添加入住人'}}
                <svg class="icon" style="font-size: 12px">
                    <use xlink:href="#icon-you"></use>
                </svg>
            </span>
        </div>
        <i class="tieku"></i>
        <div>
            <span>手机号</span>
            <span v-cloak>{{houseInfo.phone}}</span>
        </div>
    </section>
    <!-- 保险信息 -->
    <section class="room-insurance">
        <div onclick="goInsure()">
            <span>住宿意外险</span>
            <span :class="{tips:infoDate.insuranceNum<=0,highlight:infoDate.insuranceNum>0}" v-cloak>
                {{infoDate.insuranceNum<=0?'请选择保险':'已选'+infoDate.insuranceNum+'人,赠送1人'}}
                <svg class="icon">
                    <use xlink:href="#icon-you"></use>
                </svg>
            </span>
        </div>
        <i class="tieku"></i>
        <div>
            <span>在线支付押金</span>
            <span class="highlight" v-cloak>{{houseInfo.deposit}}元</span>
        </div>
        <i class="tieku"></i>
        <!--<div>
            <span>开具发票</span>
            <span class="highlight">暂不支持</span>
        </div>-->
        <div class="warning" v-if="houseInfo.notcancel==='2'">此订单预定成功后，不可取消。</div>
    </section>
    <!-- 退款规则 -->
    <!--<section class="room-refund">
        <div>
            <span>退款规则</span>
            <span class="tips">
                产生违约金情况
                <svg class="icon">
                    <use xlink:href="#icon-you"></use>
                </svg>
            </span>
        </div>
    </section>-->
    <!-- price detail -->
    <div class="room-price-detail" v-show="roomSubmit.switch" style="display: none">
        <div class="line-transverse">
            <span>房租</span>
            <span class="highlight" v-cloak>￥{{roomSubmit.rent}}</span>
        </div>
        <div class="line-transverse">
            <span>住宿意外险</span>
            <span class="highlight" v-cloak>￥{{roomSubmit.insure}}</span>
        </div>
        <div class="line-transverse">
            <span>在线支付押金</span>
            <span class="highlight" v-cloak>￥{{roomSubmit.deposit}}</span>
        </div>
    </div>
    <!-- footer -->
    <a href="" download=""></a>
    <footer class="room-submit">
        <span class="big">总金额</span>
        <span class="highlight big" v-text="'￥'+roomSubmit.total"></span>
        <div class="highlight detail-switch" :class="{'switch-open':roomSubmit.switch}" @click="toggleSwitch">
            <svg class="icon">
                <use xlink:href="#icon-arrow-down"></use>
            </svg>
            <span>明细</span>
        </div>
        <div class="submit" onclick="submit()">提交订单</div>
    </footer>
</main>
<!-- 日期选择框框 -->
<div class="fxj-select-box__container" style="display: none;" id="popupDateBox" v-show="popupShow" v-cloak>
    <section class="fxj-select-box__date">
        <div class="fxj-select-box__date--header">
            <div class="fxj-select-box__date--date-info" v-if="choosable" v-cloak>
                <span>入住：<span class="fxj-select-box__date-num" v-cloak>{{selectDate.start}}</span></span>
                <span>离开：<span class="fxj-select-box__date-num" v-cloak>{{selectDate.end}}</span></span>
                <span>总共：<span class="fxj-select-box__date-num" v-cloak>{{selectDate.nightNum}}</span></span>
            </div>
        </div>
        <div class="fxj-select-box__date--container">
            <section class="fxj-select-box__date--calendar" v-for="month of dateList" v-cloak>
                <div class="fxj-select-calendar--years" :data-week="month.startWeek" v-cloak>{{month.date}}</div>
                <div class="fxj-select-calendar--week">
                    <span>日</span>
                    <span>一</span>
                    <span>二</span>
                    <span>三</span>
                    <span>四</span>
                    <span>五</span>
                    <span>六</span>
                </div>
                <div class="fxj-select-calendar--day">
                    <span v-for="i of Number(month.startWeek)" v-cloak></span>
                    <div v-for="day of month.child"
                         :class="{'disable':day.ban||!choosable,'ban':day.ban,start:day.start,end:day.end,mid:day.mid}"
                         @click="select(day)" v-cloak>
                        <span class="day" :class="{today:day.outmoded===0}"
                              v-cloak>{{day.outmoded===0?'今天':day.day}}</span>
                        <span class="money"
                              v-cloak>{{day.outmoded<0?'￥'+day.price:day.yet?'已租':'￥'+day.price}}</span>
                    </div>
                </div>
            </section>
        </div>
        <div class="fxj-select-box__date--title">
            <span class="fxj-select-box__date--btn" onclick="closeDatePopup()">取消</span>
            <span class="fxj-select-box__date--dsc">可租日期</span>
            <span class="fxj-select-box__date--btn" onclick="closeDatePopup(true)">确定</span>
        </div>
    </section>
</div>

@import "js.html"
<script src="../script/book_room.js"></script>
</body>
@import "footer.html"